<template>
	<view class="">
		<view class="info_contant">
			<view class="info_header">
				<image :src="avatar || '/static/img/user/missing-face.png' "></image>
				<view @tap="afterRead">更换头像</view>
				<!-- <u-upload :fileList="fileList1" @afterRead="afterRead" name="1" multiple :maxCount="1" @delete="deletePic">
					<view>更换头像</view>
				</u-upload> -->
			</view>
			<view class="middle_list flex" @tap="nickNameShow = true">
				<text class="middle_list_title">昵称</text>
				<view class="middle_right">
					<text>{{nickname}}</text>
					<text class="iconfont change iconStyle"></text>
				</view>
			</view>
			<view class="middle_list flex" @tap="sexShow = true">
				<text class="middle_list_title">性别</text>
				<view class="middle_right">
					<text v-if="form.sex == 1">男</text>
					<text v-else-if="form.sex == 2">女</text>
					<text v-else>保密</text>
					<text class="iconfont icon-you iconStyle"></text>
				</view>
			</view>
			<view class="middle_list flex" @tap="dateShow = true">
				<text class="middle_list_title">生日</text>
				<view class="middle_right">
					<text v-if="Number.isInteger(form.date)">{{timestampToDate(form.date)}}</text>
					<text v-else>{{form.date}}</text>
					<text class="iconfont icon-you iconStyle"></text>
				</view>
			</view>
		</view>

		<!-- 昵称弹出层 -->
		<u-popup :show="nickNameShow" mode="center" @close="nickNameShow = false">
			<view class="nickNamePopup">
				<u--input placeholder="请输入昵称" v-model="form.nickName" border="bottom" clearable></u--input>
				<view class="footer_change" @tap="selectNickName">确认</view>
			</view>
		</u-popup>

		<!-- 性别选择器 -->
		<u-picker :show="sexShow" :columns="sexList" keyName="label" @confirm="selectSex" @cancel="sexShow = false"
			confirmColor="#FF4D60" :defaultIndex="[form.sex - 1]" :closeOnClickOverlay="true" @close="sexShow = false"></u-picker>

		<!-- 生日弹出框 -->
		<u-datetime-picker :show="dateShow" v-model="form.date" mode="date" @cancel="dateShow = false"
			confirmColor="#FF4D60" @confirm="selectDate" :closeOnClickOverlay="true" @close="dateShow = false"></u-datetime-picker>
	</view>
</template>

<script>
	import {
		uploadFile,
		updateMember
	} from '@/common/http/api.js'
	import {
		utils
	} from '@/common/utils.js'
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				fileList1: [],
				sexShow: false,
				dateShow: false,
				nickNameShow: false,
				sexList: [
					[{
						label: '男',
						value: 1
					}, {
						label: "女",
						value: 2
					}, {
						label: "保密",
						value: 3
					}]
				],
				nickname: '',
				avatar: '',
				form: {
					sex: 1,
					nickName: '',
					date: ''
				}
			}
		},
		methods: {
			...mapMutations(['login']),
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (res) => {
						var imgPath = res.tempFilePaths[0]
						this.uploadFilePromise(imgPath).then(res => {
							this.avatar = res.data
							updateMember({
								type: 4,
								headPortrait: this.avatar
							}).then(res => {
								this.setUserInfo('headPortrait', this.avatar)
							})
						})
						
					}
				})
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: utils.baseUrl + 'api/v1/common/uploadFile', // 仅为示例，非真实的接口地址
						header:{"Authorization":this.userInfo.token},
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							resolve(JSON.parse(res.data))
						}
					});
				})
			},
			// 性别选择
			selectSex(e) {
				this.form.sex = e.value[0].value
				this.sexShow = false;
				updateMember({
					type: 5,
					sex: this.form.sex
				}).then(res => {
					this.setUserInfo('sex', this.form.sex)
				})
			},
			// 生日选择
			selectDate(e) {
				this.dateShow = false;
				updateMember({
					type: 7,
					birthday: this.timestampToDate(e.value) + " " + "00:00:00"
				}).then(res => {
					this.setUserInfo('birthday', this.timestampToDate(e.value))
				})
			},
			// 昵称选择
			selectNickName() {
				this.nickNameShow = false;
				this.nickname = this.form.nickName
				updateMember({
					type: 3,
					nickname: this.form.nickName
				}).then(res => {
					this.setUserInfo('nickname', this.form.nickName)
				})
			},
			// 修改getuserInfo
			setUserInfo(key, data) {
				const user = uni.getStorageSync("userInfo");
				user[key] = data;
				this.login(user)
			},
			timestampToDate(timestamp) {
				if (!timestamp) return '';
				// 创建一个新的Date对象，并传入时间戳（注意：JavaScript的Date对象是以毫秒为单位的，所以需要将秒转换为毫秒）  
				var date = new Date(timestamp);
				// 你可以根据需要格式化日期  
				var year = date.getFullYear();
				var month = ('0' + (date.getMonth() + 1)).slice(-2); // 月份是从0开始的，所以需要+1，并且可能需要补0  
				var day = ('0' + date.getDate()).slice(-2); // 可能需要补0  

				// 返回格式化后的日期字符串  
				return year + '-' + month + '-' + day
			}
		},
		computed: {
			userInfo() {
				return uni.getStorageSync("userInfo") ? uni.getStorageSync("userInfo") : {}
			}
		},
		onLoad() {
			console.log(this.userInfo,'xxxxxxxxxxxxxx')
			this.form.date = this.userInfo.birthday.split(' ')[0]
			this.nickname = this.userInfo.nickname
			this.form.sex = this.userInfo.sex
			this.avatar = this.userInfo.headPortrait
		}
	}
</script>

<style scoped lang="scss">
	.info_contant {
		background-color: #fff;
		padding: 0rpx 28rpx;

		.info_header {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 28rpx 0;

			image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;

			}

			view {
				font-size: 29rpx;
				color: rgba(255, 77, 96, 0.6);
				margin-top: 26rpx;
			}
		}

		.middle_list {
			border-top: 2rpx solid #F6F6F6;
			padding: 20rpx 0;

			.middle_list_title {
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 500;
				font-size: 28rpx;
				color: #313131;
			}

			.middle_right {
				display: flex;
				justify-content: space-between;
				align-items: center;

				text {
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 28rpx;
					color: #979797;
				}

				text:nth-child(2) {
					margin-left: 10rpx;
				}
			}
		}

	}

	.footer_change {
		width: 85%;
		height: 67rpx;
		text-align: center;
		line-height: 67rpx;
		color: #fff;
		background: #FD2C4C;
		border-radius: 11rpx;
		font-size: 29rpx;
		margin-top: 64rpx;
		border: 2rpx solid #FD2C4C;
	}

	.nickNamePopup {
		padding: 40rpx 24rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>